<template>
	<div class="productinfo-box">
		<div class="transfer-wrapper">
			<h2>关联专题</h2>
			<el-transfer
				style="text-align: left;margin-left:100px;margin-bottom:60px;"
				:data="subjectData"
				:props="{label:'title',key:'id'}"
				filterable
				filter-placeholder="请输入专题名称"
				:titles="['待选择','已选择']"
				v-model="subjectValueList"
			>
				
			</el-transfer>
			<h2>关联优选</h2>
			<el-transfer
				style="text-align: left;margin-left:100px;"
				:data="prefrenceAreaList"
				:props="{label:'name',key:'id'}"
				filterable
				filter-placeholder="请输入优选名称"
				:titles="['待选择','已选择']"
				v-model="prefrenceAreaValueList"
			>
				
			</el-transfer>
		</div>
		<div class="btn-box">
			<el-button size="small" type="primary" @click="$emit('input',2)">上一步，填写商品属性</el-button>
			<el-button size="small" type="primary" @click="over">完成</el-button>
		</div>
	</div>
</template>

<script>
	import {getSubjectList,getPrefrenceAreaList,productAdd,productUpdate} from '@/api/product.js'
	export default{
		props:['value','product'],
		data(){
			return{
				subjectData:[],
				subjectValueList:[],
				prefrenceAreaList:[],
				prefrenceAreaValueList:[]
			}
		},
		mounted() {
			getSubjectList().then(r=>{this.subjectData = r.data})
			getPrefrenceAreaList().then(r=>{this.prefrenceAreaList = r.data})
			
		},
		methods:{
			over(){
				//发送请求添加商品..到底是编辑还是新增
				
				if(this.product.id != 0){
					console.log("更新");
					productUpdate(this.product.id,this.product).then(r=>{alert("success,...update")})
				}else{
					console.log("新增")
					productAdd(this.product).then(r=>{alert("success")})
				}
			}
		}
	}
</script>

<style lang="scss">
	*{font-size:13px;}
	.productinfo-box{
		.btn-box{
			text-align: center;
		}
	}.transfer-wrapper{
		// border:10px solid red;
		padding-left:50px;
		margin-top:50px;
		.el-transfer__buttons{
			.el-button{
				border-radius:20%;
			}
		}
	}
</style>
